<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="advanced.css">
</head>
<body>

    <section id="header">
        <ul class="menu">
            <li><a href="#home">Home</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#who-are-we">Who we are</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="http://www.google.com">External link</a></li>
        </ul>
    </section>

    <section id="home">
        Home or go to <a href="#contact">Contact</a>
    </section>
    <section id="projects">
        Projects
    </section>
    <section id="who-are-we">
        Who are we
    </section>
    <section id="contact">
        Contact
    </section>

    <script type="application/javascript" src="../jquery.min.js"></script>
    <script type="application/javascript" src="../singlepagenav.jquery.js"></script>
    <script type="application/javascript">
        jQuery(function(){
            jQuery('.menu').singlePageNav({
                offset: 50,                 // Offset from top
                currentClass: 'current',    // Class added to menu link when section is active
                currentThreshold: 250,      // Threshold for triggering current section action
                duration: 250,              // Duration of scroll animation in milliseconds
                effect: 'swing',            // Effect for scroll animation
                started: function (){       // Callback at start of animation
                    console.log('Started');
                },
                finished: function (){      // Callback after animation is finished
                    console.log('Finished')
                }
            });
        });
    </script>

</body>
</html>
